import React, { Component } from 'react'
import SwiperStyles from './index.module.css'
import { Swiper } from 'antd-mobile'
//引入
import PropTypes from 'prop-types';
const style = {
  '--dot-color': 'rgba(0, 0, 0, 0.4)',
  '--active-dot-color': '#888',
  '--dot-size': '10px',
  '--dot-border-radius': '50%',
  '--active-dot-border-radius': '15px',
  '--dot-spacing': '8px',
}
class index extends Component {
  //设置props默认值
  static defaultProps = {
    swiperImg: [],
  }
  //检测props类型   
  static propTypes = {
    swiperImg: PropTypes.array.isRequired
  }
  render() {
    const { swiperImg } = this.props
    return (
      <div className={SwiperStyles.swiper}>
        <Swiper autoplay loop indicatorProps={{ style }}>
          {
            swiperImg?.map((item, index) => {
              return (
                <Swiper.Item key={index}>
                  <img src={`http://47.102.145.189:8009${item}`} className={SwiperStyles.swiper_content} />
                </Swiper.Item>
              )
            })
          }
        </Swiper>
      </div>
    )
  }
}


export default index